<template>
  <div class="left-nav" v-bind:class="{ 'left-nav-hidden': isHidden }">
    <div class="left-nav-content">
      <div class="left-nav-section">
        <el-form>
          <el-form-item label="标段:">
            <el-select v-model="selectedSectionId" placeholder="请选择" size="small">
              <el-option value="ALL" label="所有标段"></el-option>
              <el-option
                v-for="item in sections"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="left-nav-menu">
        <el-menu unique-opened>
          <el-submenu index="station">
            <template slot="title">
              <div
                class="left-nav-menu-title"
              >{{ mileageAndStationLayers.station.name }}（{{ filteredFeatures(mileageAndStationLayers.station).length }}）</div>
            </template>
            <el-menu-item
              v-for="feature in filteredFeatures(mileageAndStationLayers.station)"
              :index="feature.getId()"
              :key="feature.getId()"
              :title="feature.get('name') || '未命名'"
              v-on:click="onItemClickListener(feature)"
            >{{ feature.get('name') || '未命名' }}</el-menu-item>
          </el-submenu>
          <el-submenu index="spoil">
            <template slot="title">
              <div
                class="left-nav-menu-title"
              >{{ temporaryProjectLayers.spoil.name }}（{{ filteredFeatures(temporaryProjectLayers.spoil).length }}）</div>
            </template>
            <el-menu-item
              v-for="feature in filteredFeatures(temporaryProjectLayers.spoil)"
              :index="feature.getId()"
              :key="feature.getId()"
              :title="feature.get('name') || '未命名'"
              v-on:click="onItemClickListener(feature)"
            >{{ feature.get('name') || '未命名' }}</el-menu-item>
          </el-submenu>
          <el-submenu index="fetch">
            <template slot="title">
              <div
                class="left-nav-menu-title"
              >{{ temporaryProjectLayers.fetch.name }}（{{ filteredFeatures(temporaryProjectLayers.fetch).length }}）</div>
            </template>
            <el-menu-item
              v-for="feature in filteredFeatures(temporaryProjectLayers.fetch)"
              :index="feature.getId()"
              :key="feature.getId()"
              :title="feature.get('name') || '未命名'"
              v-on:click="onItemClickListener(feature)"
            >{{ feature.get('name') || '未命名' }}</el-menu-item>
          </el-submenu>
          <el-submenu index="yczsjc">
            <template slot="title">
              <div
                class="left-nav-menu-title"
              >{{ monitorLayers.yczsjc.name }}（{{ filteredFeatures(monitorLayers.yczsjc).length }}）</div>
            </template>
            <el-menu-item
              v-for="feature in filteredFeatures(monitorLayers.yczsjc)"
              :index="feature.getId()"
              :key="feature.getId()"
              :title="feature.get('name') || '未命名'"
              v-on:click="onItemClickListener(feature)"
            >{{ feature.get('name') || '未命名' }}</el-menu-item>
          </el-submenu>
          <el-submenu index="sdwsjc">
            <template slot="title">
              <div
                class="left-nav-menu-title"
              >{{ monitorLayers.sdwsjc.name }}（{{ filteredFeatures(monitorLayers.sdwsjc).length }}）</div>
            </template>
            <el-menu-item
              v-for="feature in filteredFeatures(monitorLayers.sdwsjc)"
              :index="feature.getId()"
              :key="feature.getId()"
              :title="feature.get('name') || '未命名'"
              v-on:click="onItemClickListener(feature)"
            >{{ feature.get('name') || '未命名' }}</el-menu-item>
          </el-submenu>
          <el-submenu index="gps">
            <template slot="title">
              <div
                class="left-nav-menu-title"
              >{{ monitorLayers.gps.name }}（{{ filteredFeatures(monitorLayers.gps).length }}）</div>
            </template>
            <el-menu-item
              v-for="feature in filteredFeatures(monitorLayers.gps)"
              :index="feature.getId()"
              :key="feature.getId()"
              :title="feature.get('name') || '未命名'"
              v-on:click="onItemClickListener(feature)"
            >{{ feature.get('name') || '未命名' }}</el-menu-item>
          </el-submenu>
          <el-submenu index="mixing">
            <template slot="title">
              <div
                class="left-nav-menu-title"
              >{{ temporaryProjectLayers.mixing.name }}（{{ filteredFeatures(temporaryProjectLayers.mixing).length }}）</div>
            </template>
            <el-menu-item
              v-for="feature in filteredFeatures(temporaryProjectLayers.mixing)"
              :index="feature.getId()"
              :key="feature.getId()"
              :title="feature.get('name') || '未命名'"
              v-on:click="onItemClickListener(feature)"
            >{{ feature.get('name') || '未命名' }}</el-menu-item>
          </el-submenu>
          <el-submenu index="beam">
            <template slot="title">
              <div
                class="left-nav-menu-title"
              >{{ temporaryProjectLayers.beam.name }}（{{ filteredFeatures(temporaryProjectLayers.beam).length }}）</div>
            </template>
            <el-menu-item
              v-for="feature in filteredFeatures(temporaryProjectLayers.beam)"
              :index="feature.getId()"
              :key="feature.getId()"
              :title="feature.get('name') || '未命名'"
              v-on:click="onItemClickListener(feature)"
            >{{ feature.get('name') || '未命名' }}</el-menu-item>
          </el-submenu>
          <el-submenu index="sleeper">
            <template slot="title">
              <div
                class="left-nav-menu-title"
              >{{ temporaryProjectLayers.sleeper.name }}（{{ filteredFeatures(temporaryProjectLayers.sleeper).length }}）</div>
            </template>
            <el-menu-item
              v-for="feature in filteredFeatures(temporaryProjectLayers.sleeper)"
              :index="feature.getId()"
              :key="feature.getId()"
              :title="feature.get('name') || '未命名'"
              v-on:click="onItemClickListener(feature)"
            >{{ feature.get('name') || '未命名' }}</el-menu-item>
          </el-submenu>
          <el-submenu index="track">
            <template slot="title">
              <div
                class="left-nav-menu-title"
              >{{ temporaryProjectLayers.track.name }}（{{ filteredFeatures(temporaryProjectLayers.track).length }}）</div>
            </template>
            <el-menu-item
              v-for="feature in filteredFeatures(temporaryProjectLayers.track)"
              :index="feature.getId()"
              :key="feature.getId()"
              :title="feature.get('name') || '未命名'"
              v-on:click="onItemClickListener(feature)"
            >{{ feature.get('name') || '未命名' }}</el-menu-item>
          </el-submenu>
          <el-submenu index="steel">
            <template slot="title">
              <div
                class="left-nav-menu-title"
              >{{ temporaryProjectLayers.steel.name }}（{{ filteredFeatures(temporaryProjectLayers.steel).length }}）</div>
            </template>
            <el-menu-item
              v-for="feature in filteredFeatures(temporaryProjectLayers.steel)"
              :index="feature.getId()"
              :key="feature.getId()"
              :title="feature.get('name') || '未命名'"
              v-on:click="onItemClickListener(feature)"
            >{{ feature.get('name') || '未命名' }}</el-menu-item>
          </el-submenu>
          <el-submenu index="transfer">
            <template slot="title">
              <div
                class="left-nav-menu-title"
              >{{ temporaryProjectLayers.transfer.name }}（{{ filteredFeatures(temporaryProjectLayers.transfer).length }}）</div>
            </template>
            <el-menu-item
              v-for="feature in filteredFeatures(temporaryProjectLayers.transfer)"
              :index="feature.getId()"
              :key="feature.getId()"
              :title="feature.get('name') || '未命名'"
              v-on:click="onItemClickListener(feature)"
            >{{ feature.get('name') || '未命名' }}</el-menu-item>
          </el-submenu>
          <el-submenu index="temporary">
            <template slot="title">
              <div
                class="left-nav-menu-title"
              >{{ temporaryProjectLayers.temporary.name }}（{{ filteredFeatures(temporaryProjectLayers.temporary).length }}）</div>
            </template>
            <el-menu-item
              v-for="feature in filteredFeatures(temporaryProjectLayers.temporary)"
              :index="feature.getId()"
              :key="feature.getId()"
              :title="feature.get('name') || '未命名'"
              v-on:click="onItemClickListener(feature)"
            >{{ feature.get('name') || '未命名' }}</el-menu-item>
          </el-submenu>
          <el-submenu index="camp">
            <template slot="title">
              <div
                class="left-nav-menu-title"
              >{{ temporaryProjectLayers.camp.name }}（{{ filteredFeatures(temporaryProjectLayers.camp).length }}）</div>
            </template>
            <el-menu-item
              v-for="feature in filteredFeatures(temporaryProjectLayers.camp)"
              :index="feature.getId()"
              :key="feature.getId()"
              :title="feature.get('name') || '未命名'"
              v-on:click="onItemClickListener(feature)"
            >{{ feature.get('name') || '未命名' }}</el-menu-item>
          </el-submenu>
          <el-submenu index="other">
            <template slot="title">
              <div
                class="left-nav-menu-title"
              >{{ temporaryProjectLayers.other.name }}（{{ filteredFeatures(temporaryProjectLayers.other).length }}）</div>
            </template>
            <el-menu-item
              v-for="feature in filteredFeatures(temporaryProjectLayers.other)"
              :index="feature.getId()"
              :key="feature.getId()"
              :title="feature.get('name') || '未命名'"
              v-on:click="onItemClickListener(feature)"
            >{{ feature.get('name') || '未命名' }}</el-menu-item>
          </el-submenu>
        </el-menu>
      </div>
    </div>
    <div
      class="left-nav-control"
      v-bind:class="isHidden ? 'el-icon-arrow-right' : 'el-icon-arrow-left'"
      v-on:click="isHidden = !isHidden"
    ></div>
  </div>
</template>

<script>
import { mapData } from "@/stores/map-store";
import request from "@/utils/request";

export default {
  name: "left-nav",
  data() {
    return {
      isHidden: true,
      sections: [],
      selectedSectionId: "ALL",
      store: {
        mapData
      }
    };
  },
  mounted() {
    const _this = this;
    _this.loadSections();
  },
  methods: {
    loadSections() {
      const _this = this;
      request.loadSections().then(response => {
        if (response.status === 200 && response.data.code === 0) {
          _this.sections = response.data.data.list;
        }
      });
    },
    onItemClickListener(feature) {
      const _this = this;
      _this.$overlay.show({
        map: _this.store.mapData.map,
        feature: feature,
        fit: true
      });
    }
  },
  computed: {
    filteredFeatures() {
      const _this = this;
      return layer => {
        if (/*!layer.visible || */ !layer.features) {
          return [];
        } else {
          return layer.features.filter(feature => {
            if (
              _this.selectedSectionId === "ALL" ||
              _this.selectedSectionId === feature.get("section_id")
            ) {
              return true;
            } else {
              return false;
            }
          });
        }
      };
    },
    mileageAndStationLayers() {
      const _this = this;
      return _this.store.mapData.layers.mileageAndStation;
    },
    temporaryProjectLayers() {
      const _this = this;
      return _this.store.mapData.layers.temporaryProject;
    },
    monitorLayers() {
      const _this = this;
      return _this.store.mapData.layers.monitor;
    }
  }
};
</script>

<style scoped>
.left-nav {
  width: 300px;
  height: 60%;
  position: absolute;
  top: 50%;
  left: 0;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 5px;
  padding: 10px 0 10px 10px;
  display: flex;
  flex-direction: row;
  transform: translate(0, -50%);
  transition: left 0.5s;
  user-select: none;
  border: 1px solid lightgray;
}

.left-nav-hidden {
  left: -291px;
}

.left-nav-content {
  width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: white;
}

.left-nav-section {
  width: 100%;
}

.el-form {
  margin: 10px;
}

.el-form-item {
  margin-bottom: 0;
  text-align: left;
}

.el-select {
  width: 200px;
}

.left-nav-menu {
  width: 100%;
  height: 0;
  flex: 1;
  overflow-y: auto;
  border-top: 1px solid whitesmoke;
}

.el-submenu {
  border-top: 1px solid whitesmoke;
}

.el-menu-item {
  border-top: 1px solid whitesmoke;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.left-nav-menu-title {
  text-align: left;
  font-weight: bold;
}

.left-nav-control {
  cursor: pointer;
}

.left-nav-control-icon {
  color: white;
  width: 20px;
  top: 50%;
  font-size: 20px;
  position: relative;
  display: block;
  transform: translate(0, -50%);
}

.left-nav-control::before {
  color: white;
  width: 20px;
  top: 50%;
  font-size: 20px;
  position: relative;
  display: block;
  transform: translate(0, -50%);
}
</style>
